<!--
 * @Author: master
 * @Date: 2022-03-29 16:32:41
 * @LastEditTime: 2022-04-12 13:34:03
 * @Description: app入口
-->
<template>
  <router-view v-slot="{ Component }">
    <transition :name="transitionName">
      <component :is="Component" />
    </transition>
  </router-view>
</template>
<script setup>
import { ref } from 'vue';
import router from '@path/router/index.js';
const transitionName = ref('fade');
/**
 * 监听路由变化
 */
router.afterEach((to, from) => {
  if (to.meta?.index && from?.meta?.index) {
    // 如果to索引大于from索引,判断为前进状态,反之则为后退状态
    if (to.meta.index < from.meta.index) {
      // 设置动画名称
      transitionName.value = 'slide-right';
    } else {
      transitionName.value = 'slide-left';
    }
  } else {
    transitionName.value = '';
  }
});
</script>
<style lang="less" scoped>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  width: 100%;
  will-change: transform;
  transition: all 400ms;
  position: absolute;
}

.slide-right-enter-from {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter-from {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
